<!--
 * @Author yuec621@outLook.com
 * @Description: 曲线下方列表组件
 * @Date: 2024-11-04 13:34:02
 * @LastEditTime: 2024-11-14 13:58:35
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
    <div class="tableBox">
        <div class="tabBoxchartTable">
            <slot name="tabBoxList"></slot>
        </div>
        <vxe-table height="200" :data="tabledata" stripe border="inner" :key="state.tabledata">
            <vxe-column v-for="(item, index) in tableheads_show" :field="item.field" :title="item.title"
                :width="item.width ? item.width : ''" :key="index">
                <template v-if="item.listSS" #default="{ row }">
                    <slot name="listSS" :row="row" :field="item.field"></slot>
                </template>
            </vxe-column>
            <vxe-column title="操作" :min-width="80" v-if="curdShow">
                <template #default="{ row }">
                    <slot name="opraCurdBtn" :row="row"></slot>
                </template>
            </vxe-column>
            <template #empty>
                <span class="nodataClass">
                    <img src="@/assets/images/空白.png">
                    <p>暂未查询到结果</p>
                </span>
            </template>
        </vxe-table>
        <div v-if="pageconfig.total > 0" class="w100 pagevxe" style="height: 35px;position: relative;margin: 10px 0;">
            <el-pagination class="globalFontSize" v-model:current-page="pageconfig.currentPage"
                v-model:page-size="pageconfig.pageSize" :page-sizes="[10, 20, 30, 40]" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageconfig.total"
                @size-change="pagechangeSize" @current-change="pagechange" style="position: absolute;right: 10px;" />
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        listSS: {
            default: () => [],
        },
        curdShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        tabledata: {
            type: Array,
            default: () => {
                return []
            }
        },
        tabList: {
            type: Array,
            default: () => {
                return []
            }
        },
        tableheadsValue: {
            type: Array,
            default: () => {
                return []
            }
        },
        pageconfig: {
            type: Object,
            default: () => {
                return {}
            }
        },
    })
    const emit = defineEmits([]);
    // 重点
    const state = reactive({
        pageconfig: {
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
        options: {
            tableheads: computed(() => table_headers.hisAlarmLineTable),
            dataUrl: '/pointData/hisAlarmTable'
        },
        tabledata: [],
        type: 0
    })
    // 数组去重
    function unique(arr, key) {
        const res = new Map();
        return arr.filter((a) => !res.has(a[key]) && res.set(a[key], 1));
    }
    let tableheads_show = computed(() => {
        props.tableheadsValue.forEach(item => {
            props.listSS.forEach(item1 => {
                if (item.field == item1.field) {
                    item.listSS = true
                }
            })
        })
        return unique(
            props.tableheadsValue.filter((i) => i.show === 1),
            "field"
        );
    })

    function pagechangeSize(val){
        emit('pagechangeSize',val)
    }
    function pagechange(val) {
        emit('pagechange',val)
    }

    // watchEffect(() => {
    //     console.log(props.tableheadsValue,"tableheadsValue");
    //     state.tabledata = props.tabList[0].tableData
    // })
</script>
<style lang="scss">

</style>